@import '@/styles/variables.scss';

.outpatientDetails-view{

  .scroll-view{
    height: 60vh;
  }
  .top-infomation{
    margin: $collection-y $collection-x;

    .top-item{
      margin-right: $block-x;
    }
  }

  .patient-information{
    margin: $collection-y $collection-x;
    display: flex;

    .patient-item{
      margin-right: $block-x;
      display: flex;
      align-items: center;
      padding: 0 $block-x;
      width: max-content;
      height: 30px;
      background-color: $table-top-bg;
      border: 0.5px $border-color solid;
      border-radius: $border-radius-4;

      .line{
        height: 100%;
        width: 1px;
        background-color: $border-color;
        margin: 0 $block-x;
      }
      .unitStr{
        color: $font-color-info;
      }
    }
  }

  .caseContent-main {
    margin: $collection-y $collection-x;
    border-radius: 4px;

    .caseContent-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 40px;
      padding: 0px $collection-x;
      background: $table-top-bg;
      border: 1px solid $border-color;
      border-bottom: none;
      border-top-left-radius: $border-radius-4;
      border-top-right-radius: $border-radius-4;

      .title-left {
        span {
          font-size: $font-size-main;
          color: $font-size-main;
          font-weight: bold;
        }
      }
    }

    .caseContent-content {
      border-bottom-left-radius: $border-radius-4;
      border-bottom-right-radius: $border-radius-4;
      border: 1px solid $border-color;
      background: rgba(245,245,245,0.5);
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      flex-direction: column;
      .content-item-ul {
        width: 100%;
        .line{
          height: 38px;
          width: 1px;
          background-color: $border-color;
          margin: 0 $block-x;
        }

        .content-item-container {
          width: 100%;
          box-sizing: border-box;
          border-bottom: 1px solid $border-color;
          display: flex;
          justify-content: flex-start;
          align-items: center;

          &:last-of-type {
            border: none;

          }

          .title-item {
            min-width: 80px;
            max-width: 120px;
            padding: $block-y $block-x;
            text-align: right;
          }

          .content-item {
            width: 100%;
            .el-input {
              width: 100%;

              .el-input__inner {
                background: #F5FAFB;
                border: 0px;
                height: 40px;
              }
            }

          }
        }
      }

      .check-item{
        height: 38px;
        display: flex;
        align-items: center;
        width: 100%;

        .check-item-left{
          width: 100%;
          display: flex;
          justify-content: space-between;
          padding: 0 $block-x;
        }
        .check-item-line{
          height: 100%;
          width: 1px;
          background-color: $border-color;
          margin: 0 $block-x;
        }
        .check-item-right{
          width: 100px;
          display: flex;
          justify-content: center;
        }
      }

      .enjoin-item{
        height: 38px;
        display: flex;
        align-items: center;
        width: 100%;

        .enjoin-item-left{
          width: 100px;
          display: flex;
          justify-content: center;
        }
        .enjoin-item-line{
          height: 100%;
          width: 1px;
          background-color: $border-color;
          margin: 0 $block-x;
        }
        .enjoin-item-right{
          width: 100%;
          display: flex;
          justify-content: left;
          padding: 0 $block-x;
          color: $font-color-info;
        }
      }

      .prescription-view{
        width: 100%;
        .prescription-title{
          height: 38px;
          display: flex;
          align-items: center;
          img{
            width: 16px;
            height: 16px;
            margin: 0 $block-x;
          }
        }
        .prescription-item{
          display: flex;
          align-items: center;
          height: 38px;
          border-top: 1px $border-color dashed;
          .prescription-item-name{
            width: 100%;
            padding: 0 $block-x;

            .gray{
              color: $font-color-info;
            }
          }
          .prescription-item-line{
            height: 100%;
            //width: 1px;
            border-left: 1px $border-color dashed;
          }
          .prescription-item-value{
            padding-left:$block-x;
            height: 100%;
            width: 100px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .unit{
              display: flex;
              align-items: center;
              height: 100%;
              padding: 0 $block-x;
              background-color: $table-top-bg;
            }
          }
        }
      }
    }
  }
}
